<script setup>


import Header from './components/Header/Header.vue'
import SideCore from './components/Sidebar/SideCore.vue'
import MainPanel from "./components/MainPanel/maincontain/MainPanel.vue";


import {useMainStore} from "./store/useinfo.js";

const mainStore = useMainStore();


</script>

<style>
</style>


<template>
  <div class="main-panel">
    <Header class="main-header"></Header>
    <div class="main-body">
      <SideCore class="main-side"></SideCore>
      <MainPanel class="main-main"></MainPanel>
    </div>
  </div>
</template>

<style lang="less" scoped>
@with-all: calc(100vw);

/* 当屏幕宽度小于600px时应用的样式， Home设置完成 */
@media screen and (max-width: 600px) {
  .main-panel {
    background-color: #da6767;
  }
}

.main-panel {
  width: @with-all;
  min-height: 100vh;
  display: flex;
  flex-direction: column;


  .main-header {
    min-width: calc(100vw);
    //width: 100%;
    height: 3rem;
    display: flex;
    //border-bottom: 1px solid #f1f2f4;
  }

  .main-body {
    width: calc(100vw);
    display: flex;
    flex-direction: row;
    flex: 1;

    .main-side {
      display: flex;
      min-width: 12rem;
    }

    .main-main {
      //flex-grow: 1;
      //background-color: aliceblue;
      margin: 0 10px;
    }


  }
}
</style>
